<template>
	<view>
		<dropDown :node="tableList" v-if="tableList.length>0" @nodechange="nodechange" @filechange="goDetails"></dropDown>
		<!-- <view class="cell-list">
			<view class="cell-item" v-for="(item,index) in tableList" :key='index' @click="goDetails(item)">
				<image class="cell-logo" :src="item.extra"></image>
				<view class="item-right">
					<view>
						<view class="name">{{item.name}}</view>
						<view class="cateHotList">
							<block v-if="item.isAdvice">首页推荐</block>
						</view>
					</view>
					<view class="right">
						<text>{{Number(item.ratio)}}%加价率</text>
						<text class="iconfont iconarrow-right1"></text>
					</view>

				</view>11
			</view>
		</view> -->
	</view>
</template>

<script>
	import dropDown from '@/components/w-tree/index.vue'
	import * as categoryApiMc from "@/api/categoryApi.js";
	export default {
		components: {
			dropDown
		},
		data() {
			return {
				tableList: []
			}
		},
		onLoad() {
			this.getTreeList()
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('navigation.merchantClassification')
			});
		},
		methods: {
			getTreeList() {
				let _this = this
				const _pram = {
					type: 1,
					status: -1,
				};
				uni.showLoading({
					title: _this.$t("publicLang.loading")
				});
				categoryApiMc.treeCategroy(_pram).then(async res => {
					console.info(res.data)
					// _this.tableList = res.data
					 _this.tableList=[]
					var data = await _this.renderFun(res.data)
					_this.tableList = data
					_this.$set(_this,'tableList',data)
					uni.hideLoading();
				})
			},
			renderFun(item, agoName) {
				item.map(async i => {
					if (agoName) {
						i.name = `${agoName}>${i.name}`
					}
					// this.tableList.push(i)
					if (i.child && i.child.length > 0) {
						let vm = await this.renderFun(i.child, i.name)
					}
				})
				return item
			},
			goDetails(item) {
				let _this = this
				uni.navigateTo({
					url: "classify_details/index",
					events: {
					    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
					    someEvent: function(data) {
					      _this.getTreeList()
					    },
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('detailsData', {
							data: item
						})
					}
				})
			},
			nodechange(e){
				console.info(e)
			}

		}
	}
</script>

<style lang="scss">
	.cell-list {
		.cell-item {
			width: 100%;
			padding: 14rpx 32rpx;
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			margin-bottom: 12rpx;

			.cell-logo {
				box-sizing: border-box;
				border: 1rpx solid #f1f1f1;
				width: 120rpx;
				height: 120rpx;
			}

			.item-right {
				height: 120rpx;
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-left: 12rpx;

				.cateHotList {
					margin-top: 11rpx;
					font-size: 24rpx;
					color: #BBBBBB;
				}

				.right {
					font-size: 24rpx;
					color: #BBBBBB;
				}
			}
		}
	}
</style>
